<template>
    <div class="count">
        <div class="topTit f f-a-c f-j-b">
            <div class="left f f-a-c">
                <img src="/src/status/logo.png" class="logo" alt="">
                <span>H.S.国际问题研究平台</span>
            </div>
            <div class="right">
                <img @click="setting" src="/src/status/img/cha.png" class="myStat" alt="">
            </div>
        </div>
        <div class="body">
            <!-- /下面的箭头 -->
            <div class="botBtn f f-a-c f-j-c">
                <img src="/src/status/jiantou/zuo.png" class="zuo" alt="">
                <img src="/src/status/jiantou/you.png" class="zuo" alt="">
            </div>
            <div style="margin-top: 30px;">
                <div class="title">
                    {{ obj.zh_title || obj.title }}
                </div>
                <div class="time f f-a-c">
                    <div class="tim">{{ obj.news_time }}</div>
                </div>
                <div class="content">

                    {{ obj.zh_content || obj.content }}
                </div>
                <!-- /下面的箭头 -->
                <div class="botBtn f f-a-c f-j-c">
                    <img @click="zuobian" src="/src/status/jiantou/zuo.png" class="zuo" alt="">
                    <img @click="youbian" src="/src/status/jiantou/you.png" class="zuo" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import router from '../../router';
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';
import { ArticleInfo, GetHotSpotInfo } from '../../api/index'
import { showToast, showLoadingToast, closeToast } from 'vant';
let route = useRouter()
let id = ref(1)
let ids = ref(0)
let obj = ref({
    content: '454511551'
})
let objs = ref({})
let spot_id = ref('')

// ==============================================================================
const emit = defineEmits(['zuobian', 'youbian'])
// 这是页面刚打开时候
onMounted(() => {
    obj.value = JSON.parse(localStorage.getItem('objItem'))
    id.value = route.currentRoute.value.query.id
    ids.value = route.currentRoute.value.query.topics_id
    spot_id.value = route.currentRoute.value.query.spot_id
    initObj()
})

// 点击左下面箭头
const zuobian = async () => {
    if (!objs.value.pre_spot_id) {
        return showToast('已经到头了~')
    }
    const toast = showLoadingToast({
        duration: 0,
        forbidClick: true,
        message: '加载中',
    });
    let n = await GetHotSpotInfo({
        spot_id: objs.value.pre_spot_id
    })
    closeToast();
    obj.value = n.content.info
    objs.value = n.content
    console.log(props.objItem, '0000000');
}
// 点击右下面箭头
const youbian = async () => {
    if (!objs.value.next_spot_id) {
        return showToast('已经到头了~')
    }
    const toast = showLoadingToast({
        duration: 0,
        forbidClick: true,
        message: '加载中',
    });
    let n = await GetHotSpotInfo({
        spot_id: objs.value.next_spot_id
    })
    closeToast();
    obj.value = n.content.info
    objs.value = n.content
}
const initObj = async () => {

    let n = await GetHotSpotInfo({
        spot_id: spot_id.value
    })
    obj.value = n.content.info
    objs.value = n.content
    console.log(props.objItem, '0000000');
}
// /组件卸载后
onBeforeUnmount(() => {
    localStorage.removeItem('objItem')
})
// 返回首页
const setting = () => {
    router.go(-1)
    // window.history.go(-1);
}
</script>
<style lang="scss" scoped>
@function pxfn($px) {
    @return calc($px / 3.75) * 1vw;
}

.title {
    font-size: pxfn(20);
    font-family: PingFang SC, PingFang SC-600;
    font-weight: 600;
    text-align: LEFT;
    color: #1d2129;
}

.time {
    margin: pxfn(15) 0;
    font-size: pxfn(12);
    font-family: PingFang SC, PingFang SC-400;
    font-weight: 400;
    // text-align: LEFT;
    color: #868d9c;

    .tim {
        margin-right: pxfn(15);
    }
}

.body {
    height: calc(100vh - pxfn(48));
    padding: pxfn(15);
    overflow-y: auto;
    padding-bottom: pxfn(68);

    .botBtn {
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        background-color: #fff;
        height: pxfn(68);
        padding: 0 pxfn(15);
        display: flex;
        justify-content: space-between;

        .center {
            margin: 0 pxfn(40);
        }

        .cenLef {
            width: pxfn(78);
            height: pxfn(38);
            border-radius: pxfn(8);
            font-size: pxfn(14);
            font-family: PingFang SC, PingFang SC-400;
            font-weight: 400;
            text-align: center;
            color: #1d2129;
            margin-right: pxfn(6);
        }

        .cenRig {
            width: pxfn(78);
            height: pxfn(38);
            background: #f7f8fa;
            border-radius: pxfn(8);
            font-size: pxfn(14);
            font-family: PingFang SC, PingFang SC-400;
            font-weight: 400;
            text-align: center;
            color: #1d2129;
        }

        .dk {
            width: pxfn(21);
            height: pxfn(20);
            margin-right: pxfn(4);
        }

        .zuo {
            width: pxfn(44);
            height: pxfn(44);
        }
    }
}



.count {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    padding-top: pxfn(50);
}

.topTit {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: pxfn(48);
    border: 1px solid #edf3fa;
    padding: pxfn(15);
    z-index: 1;
    font-size: pxfn(14);
    font-weight: 600;

    .logo {
        width: pxfn(27);
        height: pxfn(24);
        margin-right: pxfn(10);
    }

    .myStat {
        width: pxfn(24);
        height: pxfn(24);
    }
}

.content {
    line-height: 2;
    font-size: pxfn(14);
}
</style>